<template>
  <template v-for="(menu, index) in menuList">
    <!-- 如果当前有子菜单，则显示 el-submenu ，在el-subment 里调用 递归组件 -->
    <el-sub-menu v-if="menu.children && menu.children.length" :index="menu.path" :key="menu.path">
      <template v-slot:title>
        <img v-show="menu.icon" :src="menu.icon" alt="icon" class="menu-icon" />
        <span :class="!menu.icon ? 'menu-title' : ''">{{ menu.title }}</span>
      </template>
      <!-- 调用自身  此处是重点-->
      <MenuTree :menuList="menu.children" @select="onSelect"></MenuTree>
    </el-sub-menu>
    <!-- 如果没有子菜单，则显示当前内容 -->
    <el-menu-item
      v-else
      :index="menu.path"
      @click="onSelect(menu.path)"
      :key="`${menu.path}${index}`"
    >
      <!-- <i :class="menu.icon"></i> -->
      <img v-show="menu.icon" :src="menu.icon" alt="icon" class="menu-icon" />
      <span :class="!menu.icon ? 'menu-title' : ''">{{ menu.title }}</span>
    </el-menu-item>
  </template>
</template>

<script setup>
import MenuTree from './MenuTree.vue'

const emit = defineEmits(['update:modelValue', 'select'])
const props = defineProps({
  menuList: {
    type: Array,
    default: () => [],
  },
})
/**
 * 选择当前菜单
 */
const onSelect = menu => {
  emit('update:modelValue', menu)
}
</script>

<style scoped lang="scss">
.menu-icon {
  width: 15px;
  height: 15px;
  margin-right: 16px;
}
</style>
